<template>
  <div class="part">
    <nav-bar :title="title" :left-arrow="true"></nav-bar>
    <div id="container">
      <el-amap class="amap-box" vid="amapContainer" :events="events"></el-amap>
    </div>
  </div>
</template>

<script>
import { lazyAMapApiLoaderInstance } from 'vue-amap'
import NavBar from '../../components/NavBar/index'

export default {
  name: 'Part',
  components: {
    NavBar
  },
  data () {
    return {
      title: '停车区',
      location: {},
      events: {},
      map: null
    }
  },
  mounted () {
    lazyAMapApiLoaderInstance.load().then(() => {
      // eslint-disable-next-line no-undef
      this.map = new AMap.Map('amapContainer', {
        resizeEnable: true,
        center: [this.location.lng, this.location.lat],
        zoom: 17
      })
      // 绘制停车区域
      this.setCircle()
    })
  },
  created () {
    this.getLngLat()
  },
  methods: {
    getLngLat () {
      this.location = {
        lng: 101.725767,
        lat: 26.568038
      }
    },
    setCircle () {
      // eslint-disable-next-line no-undef
      this.circle = new AMap.Circle({
        center: [this.location.lng, this.location.lat],
        radius: 200, // 半径
        borderWeight: 3,
        strokeColor: '#FF33FF',
        strokeOpacity: 1,
        strokeWeight: 6,
        // eslint-disable-next-line no-dupe-keys
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        strokeStyle: 'dashed',
        strokeDasharray: [10, 10],
        // 线样式还支持 'dashed'
        fillColor: '#1791fc',
        zIndex: 50
      })
      // eslint-disable-next-line no-undef
      var circle2 = new AMap.Circle({
        center: [this.location.lng * 0.02, this.location.lat * 0.02],
        radius: 200, // 半径
        borderWeight: 3,
        strokeColor: '#FF33FF',
        strokeOpacity: 1,
        strokeWeight: 6,
        // eslint-disable-next-line no-dupe-keys
        strokeOpacity: 0.2,
        fillOpacity: 0.4,
        strokeStyle: 'dashed',
        strokeDasharray: [10, 10],
        // 线样式还支持 'dashed'
        fillColor: '#1791fc',
        zIndex: 50
      })
      this.circle.setMap(this.map)
      circle2.setMap(this.map)
    }
  }
}
</script>

<style scoped lang="scss">
#container {width:100%; height: 100vh; }
</style>
